<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="修改教师信息"
    @visible-change="handleVisibleChange"
    okText="提交修改"
    @ok="handleSubmit"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" :model="modelRef" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, ButtonProps, FormSchema, useForm } from '/@/components/Form/index';
  import { updateTeacher } from '../../api/preschool/teacher';
  const schemas: FormSchema[] = [
    {
      field: 'name',
      rules: [
        {
          required: true,
          // [\u4e00 - \u9fa5]  ==> 可以匹配2万多中文繁简体字符
          validator: async (_rule, value) => {
            if (!value) {
              return Promise.reject('请输入姓名');
            }
            if (!/[\u4e00-\u9fa5]{1,6}/.test(value)) {
              /* eslint-disable-next-line */
            return Promise.reject('姓名只能是中文');
            }
            return Promise.resolve();
          },
          trigger: 'change',
        },
      ],
      component: 'Input',
      label: '姓名',
      colProps: {
        span: 24,
      },
      componentProps: () => {
        return {
          placeholder: '请输入姓名',
        };
      },
    },
    {
      field: 'qualificationCqertqificateNo',
      label: '教师资格证号',
      rules: [
        { required: true },
        {
          validator: (_rule, value) => {
            if (isNaN(value)) {
              return Promise.reject('请输入数字');
            } else {
              return Promise.resolve();
            }
          },
        },
      ],
      component: 'Input',
      colProps: {
        span: 24,
      },
    },
    {
      field: 'teacherPhone',
      label: '教师手机号',
      rules: [
        { required: true },
        {
          validator: (_rule, value) => {
            if (isNaN(value)) {
              return Promise.reject('请输入数字');
            } else {
              return Promise.resolve();
            }
          },
        },
      ],
      component: 'Input',
      colProps: {
        span: 24,
      },
    },
    {
      field: 'level',
      rules: [{ required: true, type: 'number' }],
      component: 'Select',
      label: '级别',
      colProps: {
        span: 24,
      },
      componentProps: {
        options: [
          {
            label: '高级讲师',
            value: 1,
            key: '1',
          },
          {
            label: '首席讲师',
            value: 2,
            key: '2',
          },
        ],
      },
    },
    {
      field: 'career',
      rules: [{ required: true }],
      label: '资历',
      component: 'Input',
      colProps: {
        span: 24,
      },
    },
    {
      field: 'intro',
      rules: [{ required: true }],
      label: '简介',
      component: 'InputTextArea',
      colProps: {
        span: 24,
      },
    },
  ];
  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    setup(props, context) {
      const teacherId = ref<string>();
      const modelRef = ref({});
      const submitConfig: ButtonProps = {
        text: '提交修改',
      };
      const [
        registerForm,
        {
          // setFieldsValue,
          // setProps,
          getFieldsValue,
          validateFields,
        },
      ] = useForm({
        labelWidth: 120,
        autoFocusFirstItem: true,
        showActionButtonGroup: false,
        schemas,
        submitButtonOptions: submitConfig,
        actionColOptions: {
          span: 24,
        },
      });
      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });

      function onDataReceive(data) {
        console.log('Data Received', data);
        teacherId.value = data.id;
        // 方式1;
        // setFieldsValue({
        //   field2: data.data,
        //   field1: data.info,
        // });

        // // 方式2
        modelRef.value = {
          name: data.name,
          level: data.level,
          intro: data.intro,
          career: data.career,
          qualificationCqertqificateNo: data.qualificationCqertqificateNo,
          teacherPhone: data.teacherPhone,
        };

        // setProps({
        // });
      }

      function handleVisibleChange(v) {
        v && props.userData && nextTick(() => onDataReceive(props.userData));
      }
      /**
       * @description 发送请求前校验表单
       * @param values
       */
      async function validateForm(values: any) {
        try {
          await validateFields();
          console.log('passing');
          updateTeacher(values)
            .then((res) => {
              console.log(res);
              //调用父组件的方法刷新数据
              context.emit('update');
              closeModal();
            })
            .catch((error) => {
              console.log('error' + error);
            });
        } catch (error) {
          console.log('not passing', error);
        }
      }
      return {
        register,
        schemas,
        registerForm,
        modelRef,
        handleVisibleChange,
        handleSubmit: () => {
          let values = getFieldsValue();
          values.id = teacherId.value;
          console.log('values', values);
          console.log(validateForm(values));
        },
        ok: () => {},
      };
    },
  });
</script>
